{[{define "sys/role/auth.html"}]}
{[{template "sys/base/mark.html"}]}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增页面</title>
    <link rel="stylesheet" href="/pear-admin-layui/component/pear/css/pear.css"/>
</head>
<body>
<form class="layui-form" action="">
    <input type="hidden" name="id" value="{[{.id}]}">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label">auth</label>
                <div class="layui-input-block">
                    <div id="authTree"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script src="/pear-admin-layui/component/layui/layui.js"></script>
<script src="/pear-admin-layui/component/pear/pear.js"></script>
<script>

    layui.use(['form', 'jquery', 'loading', 'layer', 'tree'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let loading = layui.loading;
        let layer = layui.layer;
        let tree = layui.tree;
        let id = {[{.id}]}

        let authTree = tree.render({
            id: 'authTree',
            elem: '#authTree',
            showCheckbox: true,
            data: JSON.parse({[{.authTree}]})
        });

        authTree.config.oncheck = function (obj) {
            console.log(obj.data)
            console.log(obj.checked)
            console.log(obj.elem)

            // loading.Load(1, "loading data ...");
            // $.post('/sys/role/auth/edit', {id: id, authId: obj.data.id, checked: obj.checked}, function (r) {
            //     loading.loadRemove();
            //     if (r.code === 200) {
            //         layer.msg(r.msg, {icon: 1});
            //     } else {
            //         layer.msg(r.msg, {icon: 2});
            //     }
            // });
        }

        form.on('submit(save)', function (data) {
            let checkData = tree.getChecked('authTree')
            console.log(checkData)
            let authIds = getIds(checkData)
            console.log(authIds)
            data.field.authIds = authIds;
            if (authIds.length === 0) {
                layer.msg("没有选中任何节点", {icon: 2, time: 1000});
                return false
            }

            loading.Load(1, "loading data ...");
            $.post('/sys/role/auth/save', data.field, function (r) {
                loading.loadRemove(1000);
                if (r.code === 200) {
                    layer.msg(r.msg, {icon: 1, time: 1000}, function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                        // parent.layui.table.reload("role-table");
                    });
                } else {
                    layer.msg(r.msg, {icon: 2, time: 1000});
                }
            });
            return false
        });


        function getIds(checkData) {
            let ids = []
            if (checkData) {
                for (let checkDataKey in checkData) {
                    let temp = checkData[checkDataKey]
                    ids.push(temp.id + "")
                    if (temp.children) {
                        ids.push(...getIds(temp.children))
                    }
                }
            }
            return ids
        }
    })
</script>
</body>
</html>
{[{end}]}
